<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{pageTitle}}
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>

    <!-- 查询菜单 -->
    <div class="q-pa-sm shadow-2 q-mb-md" v-show="searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">出库单编号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.orderNo" @focus="fx.ui.select" @keyup.enter="loadListData(2)"
                :readonly="listDataLoadingState">
            </easy-input>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">仓库</div>
          <div class="col-8">
            <simple-filter-select :options="$d.whDropdownList" :readonly="listDataLoadingState" :use-filter="false"
                option-label="whName" option-value="whId" v-model="fpsReq.whId" />
          </div>
        </div>
        <div class="row q-pt-sm">
          <div class="q-mr-sm">
            <q-btn :disable="listDataLoadingState" @click="loadListData(2)" color="primary" icon="search" label="查询" />
          </div>
        </div>
      </div>
    </div>

    <div class="shadow-2">
      <q-table v-model:pagination="fpsInfo.paginationInfo" :columns="fpsInfo.columnsInfo" :hide-pagination="true"
          :loading="listDataLoadingState" :rows="$d.tableData" :visible-columns="fpsInfo.visibleColumns" binary-state-sort
          color="primary" dense flat separator="cell" @request="fpsAssist.onDataTableRequest">
        <template v-slot:top="props">
          <q-space />
          <q-btn @click="downloadListExcel" dense flat icon="save_alt" title="导出Excel(受最大条数上限限制,默认10000,有疑问可联系软件供应商)" />
          <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
              v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
              @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
              :title="props.inFullscreen ? '退出全屏' : '全屏显示'" dense flat @click="props.toggleFullscreen" />
        </template>
        <template v-slot:no-data>
          <div class="full-width items-center justify-center row">
            <q-icon name="error_outline" />
            无数据
            <q-btn :disable="listDataLoadingState" :loading="listDataLoadingState" class="q-ml-sm" dense
                flat icon="refresh" size="sm" title="刷新" @click="loadListData"></q-btn>
          </div>
        </template>
        <!-- 底部分页条 -->
        <template v-slot:bottom>
          <paging-bar :loading-state="listDataLoadingState" :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize"
              :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
              @go-to-page="fpsNav.gotoPage" />
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'WmInvRemainingStd'
}
</script>
<script lang="ts" setup>
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'
import {reactive} from 'vue'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {ref} from 'vue'
import {InvAvailableLine, InvAvailableReq, InvAvailableResp} from 'src/defs/report/invRemaining'
import {WmWhLite} from '@njt/wms/defs/basic/wh'

const pageTitle = '剩余库存报表'
useTitleHelper(pageTitle)

// 是否处于数据列表加载的状态
const listDataLoadingState = ref(false)

// 查询参数
const fpsReq: InvAvailableReq = reactive({
  orderNo: null,
  whId: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null
})


const columnsDefine: ColumnInfo[] = [
  {
    label: '配送单序号',
    name: 'orderId',
    field: 'orderId',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    label: '配送单号',
    name: 'orderNo',
    field: 'orderNo',
    align: 'left',
    defOrder: 2,
    defVisible: true
  },
  {
    label: '收件人姓名',
    name: 'sContact',
    field: 'sContact',
    align: 'left',
    defOrder: 3,
    defVisible: true
  },
  {
    label: '联系方式',
    name: 'sPhone',
    field: 'sPhone',
    align: 'left',
    defOrder: 4,
    defVisible: true
  },
  {
    label: '省份',
    name: 'sProvince',
    field: 'sProvince',
    align: 'left',
    defOrder: 5,
    defVisible: true
  },
  {
    label: '城市',
    name: 'sCity',
    field: 'sCity',
    align: 'left',
    defOrder: 6,
    defVisible: true
  },
  {
    label: '地址',
    name: 'sAddress',
    field: 'sAddress',
    align: 'left',
    defOrder: 7,
    defVisible: true
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left',
    defOrder: 8,
    defVisible: true
  },
  {
    label: '数量',
    name: 'qty',
    field: 'qty',
    align: 'left',
    defOrder: 9,
    defVisible: true
  },
  {
    label: '料号品名',
    name: 'skuName',
    field: 'skuName',
    align: 'left',
    defOrder: 10,
    defVisible: true
  }
]

let $d = reactive({
  tableData: [] as InvAvailableLine[],
  // 仓库下拉
  whDropdownList: [] as WmWhLite[],
})

// 列表加载
const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  listDataLoadingState.value = true
  $f.axios.get<InvAvailableResp>('/wms/rpt/inv-report/get-inv-transaction-report', {params: fpsReq})
      .then(result => {
        fpsAssist.handleGenericFpsResp(result.data)
        $d.tableData = result.data.lines
        fpsAssist.saveFpsReq(fpsReq)
      })
      .catch((err) => {
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
      .finally(() => {
        listDataLoadingState.value = false
      })
}

const {
  fpsInfo,
  fpsAssist,
  fpsNav,
  searchBarVisibility
} = useFpsHelper('/wms/rpt/inv-remaining',
    null,
    null,
    null,
    fpsReq, columnsDefine,
    null,
    loadListData,false)

// 导出EXCEL
const downloadListExcel = function () {
  let params = $f.misc.makeSimpleQueryObj(fpsReq, [], { pageNo: 1, pageSize: 0x7fffffff })
  let url = $f.misc.makeUrlWithQueryParam(
      '/project/mhlbc/rpt/get-inv-available-list-excel',
      params
  )
  $f.nw.downloadFileWithAuth(url, '', false)
}

// 仓库下拉
void $f.lst.getWmWhSimpleList()
    .then((resp) => {
      $d.whDropdownList = resp
    })

const fx = $f
</script>
